<style>
</style>

<template>
  <div class="search-form-con">
    <Row type="flex" justify="space-between" style="margin-bottom: 24px;">
      <Col :span="12">
        <Button icon="plus" type="primary" @click="addModuleModal.show = true">添加模块</Button>
      </Col>
    </Row>


    <!-- 添加用户 -->
    <Modal v-model="addModuleModal.show" width="400">

      <p slot="header" style="text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>添加模块</span>
      </p>

      <div>
        <Form :model="addModuleModal.form" label-position="top">
          <FormItem label="* 模块名称">
            <Input v-model="addModuleModal.form.name" placeholder="请输入模块名称"/>
          </FormItem>
          <FormItem label="* 模块标识">
            <Input v-model="addModuleModal.form.identifier" placeholder="请输入模块标识（英文）"/>
          </FormItem>
          <FormItem label="备注">
            <Input type="textarea" v-model="addModuleModal.form.remark" placeholder="请输入备注"/>
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="primary" :loading="addModuleModal.loading" @click="handleAddUser(addModuleModal.form)"
                long>
          <span v-if="!addModuleModal.loading">添加模块</span>
          <span v-else>请求提交中</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: 'ModuleViewHeadTool',
    data() {
      return {
        // 添加模块模态框
        addModuleModal: {
          show: false,
          form: {
            name: '',
            identifier: '',
            remark: '',
          },
          loading: false
        }
      }
    },
    methods: {
      handleAddUser(form) {
        this.addModuleModal.loading = true;
        this.$emit('on-add-module', form, (status) => {
          if (status) {
            this.addModuleModal.show = false
            Object.assign(this.$data.addModuleModal.form, this.$options.data().addModuleModal.form)
          }
          this.addModuleModal.loading = false;
        });
      }
    }
  }
</script>
